<template>
    <!-- 弹出层 -->
    <a-modal :title="title" @cancel="btnCancel" @ok="btnOk" v-model:visible="showDialogComputed">
        <!-- labelCol定义 表单中左侧标题的一个宽度 -->
        <a-form :labelCol="{ span: 4 }">
            <a-form-item label="公告内容" name="content" v-bind="form.validateInfos.content">
                <a-textarea v-model:value="formData.content" placeholder="请输入公告内容"
                    :auto-size="{ minRows: 5, maxRows: 10 }" />
            </a-form-item>
            <a-form-item label="类别" name="category">
                <a-space>
                    <a-select v-model:value="value" style="width: 120px" :options="options"
                        @change="handleChangeSelect">
                    </a-select>
                </a-space>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup lang="ts">
import { Form, message } from 'ant-design-vue'
import type { SelectProps } from 'ant-design-vue'


// 父子组件通信 父：v-model:showDialog="showDialog"
// 子： emits('update:showDialog','传给父组件的值')

// Props是单向数据流只能在父组件修改，不能在子组件修改
const { showDialog, title, id } = defineProps({
    showDialog: Boolean,
    title: String,
    id: Number
})

// 得到一个事件触发器
const emits = defineEmits<{
    (e: 'update:showDialog', val: Boolean): void,
    (e: 'addSuccess'): void,
}>()
// const emits = defineEmits(['update:showDialog'])

const initValues = {
    content: '',
    category: 0
}
const formData = ref(initValues) // 声明一个响应式数据

const showDialogComputed = computed({
    get() {
        return showDialog  // 读取Props传来的值
    },
    set(val) {
        // val 是需要从父组件去入手修改 子传父
        emits('update:showDialog', val) // 告诉父组件 去修改showDialog的值
    }
})

const btnCancel = () => {
    form.resetFields() // 清除数据 并且清除校验
}

const btnOk = async () => {
    await form.validate()
    if (id === 999) {
        const res = await publicNotice(formData.value)
        res.code === 201 ? message.success('发布公告成功') : message.error('发布公告失败')
    } else {
        const res = await editNotice(id as number, formData.value)
        res.code === 201 ? message.success('编辑公告成功') : message.error('编辑公告失败')
    }
    btnCancel(),

        // 关闭弹层
        showDialogComputed.value = false

    // 新增成功 只是后端接口插入了一条数据- 前端并没有更新- 重新拉取数据
    // 告诉父组件
    emits('addSuccess')
}

// 校验规则
const rules = reactive({
    content: [
        { required: true, message: '公告内容不能为空', trigger: 'blur' },
        { min: 4, max: 100, message: '内容长度为4-100位' }
    ]
})

// 引入antd的From下的useForm方法把校验规则绑定在formData.value上
const form = Form.useForm(formData.value, rules)

const category = ref(0)
// 选择器 
const options = ref<SelectProps['options']>([
    {
        value: 0,
        label: '考研专区',
    },
    {
        value: 1,
        label: '就业专区',
    },
    {
        value: 2,
        label: '校园活动',
    },
    {
        value: 3,
        label: '跑腿专区',
    },
])

const handleChangeSelect: SelectProps['onChange'] = value => {
    // console.log(value)
    category.value = Number(value)
}

// const categoryNumber = ref(0)
const value = ref({ value: category })

watch([() => showDialog, () => id], async () => {
    if (showDialog && id !== 999) {
        const res = await getNotices(id as number)
        formData.value.content = res.data.notice.content
        category.value = res.data.notice.category
    }
})
</script>